<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>
        Android和html交互demo
    </title>
</head>

<body style="padding：0; margin:0;">

<p style="padding：0; margin:0;color:red; background-color:red;display:flex; justify-content:center;
                   align-items:center; width:100%; min-height:100vh">

    <button style="color:yellow; background-color:blue; padding-top:12px; padding-bottom:12px" id="enter" onclick="testClick();">
        弹出安卓Toast,并显示文本'TCL'<br/>(延迟3秒告知JS结果)
    </button>

</body>
<script>

        function testClick() {
            <!-- 下面是js调用Android方法，java需要先使用webView.registerHandler注册，根据方法名区分不同方法（下面的方法名：methodInJava） -->
            <!-- methodInJava:方法名 -->
            <!-- 你点击了Html中的button:传给android的数据(可以json格式) -->
            <!-- responseData:java被成功调用后回传的数据 -->
            window.WebViewJavascriptBridge.callHandler(
                'methodInJava'
                , '你点击了Html中的button'
                , function(responseData) {
                    <!--document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData-->
                    alert(responseData)
                }
            );
        }

        <!--Android与JS通信初始化-->
        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }

        <!-- Android调用js的方法在下面里注册 -->
        connectWebViewJavascriptBridge(function(bridge) {
            <!-- 下面是js默认方法（可不用），java使用webView.send("")即可触发，可以（建议）进行版本控制 -->
            <!--bridge.init(function(message, responseCallback) {-->
                <!--console.log('JS got a message', message);-->
                <!--var data = {-->
                    <!--'Javascript Responds': '测试中文!'-->
                <!--};-->

                <!--if (responseCallback) {-->
                    <!--console.log('JS responding with', data);-->
                    <!--responseCallback(data);-->
                <!--}-->
            <!--});-->


            <!-- 下面是Android调用js方法，java使用webView.callHandler调用，根据方法名区分不同方法（下面的方法名：showMsg） -->
            <!-- showMsg:方法名 -->
            <!-- data:Android传递给js的数据 -->
            <!-- responseData:js被成功调用后回传给Android的数据 -->
            bridge.registerHandler("showMsg", function(data, responseCallback) {

                alert('你在Android原生中输入了：' + data);
                <!--window.confirm("sometext");-->

                 var responseData = "Android调用JS成功";
                 responseCallback(responseData);
            });
        })

</script>

</html>

